<!--  -->
<template>
  <div class="zh-main-bd">
    <div class="zh-main-bd-hd">
      <Row type="flex" justify="space-between" class="width-1024">
        <Col span="12" >
          <div class="zh-flex zh-flex-1 left-head-production">
            <img src="../assets/logo-3.png" alt="">
            <span>用户管理中心</span>
          </div>  
        </Col>
        <Col span="12" >
          <div class="zh-flex zh-flex-2 right-head-user">
            <!-- <p><Icon type="log-out"></Icon>退出</p> -->
            <Button @click="handleCLickLogOut" type="text" style="color:#fff;" icon="log-out">退出</Button>
          </div>
        </Col>
      </Row>
    </div>
    
      <Row  class="width-1024 zh-main-bd-ct">
        <Col :span="colNum" class="animationtranslate">
            <div class="zh-sideBar-container" style="height:400px;">
                <smenu  
                    :shrink="shrink"
                    @on-change="handleSubmenuChange"
                    :theme="menuTheme" 
                    :before-push="beforePush"
                    :open-names="openedSubmenuArr"
                    :menu-list="menuList"
                    :iconSize="20"
                    class="zh-side-menu">
                    <div slot="right" class="shrink-btn" @click="handleClickShrink">
                        <Icon size="18" v-show="!shrink"  type="android-arrow-dropleft-circle" key="max-logo"></Icon>
                        <Icon size="18" v-show="shrink" type="android-arrow-dropright-circle" key="min-logo"></Icon>
                    </div>
                </smenu>
            </div>
        </Col>
        <Col :span="24-colNum" class="animationtranslate" style="padding-left:25px;">
            <div  class="zh-small-component zh-flex zh-flex-3" >
                <bank-block :bankName="bankName" :bankImg="bankImg"></bank-block>
                <div style="height:100%;" class=" zh-flex zh-flex-4 " >
                    <count-up 
                    v-for="(item ,i) in totalStateArr"
                        :key="i"
                        :id-name="i+'-'+item.count"
                        class="small-state-box"  
                        :end-val="item.count" 
                    >
                        <p class="infor-intro-text" slot="intro">{{ item.name }}</p>
                    </count-up>
                </div>
            </div>
            <Card :bordered="false" class="zh-breadcrumb-nav">
              <breadcrumb-nav :currentPath="currentPath"></breadcrumb-nav>
            </Card>
            <div  style="min-height:250px;">
            <router-view></router-view>
            </div>
        </Col>
      </Row>
    
  </div>
</template>

<script>
    import smenu from './main-components/menu/menu.vue';
    import breadcrumbNav from './main-components/breadcrumb-nav.vue';
    import bankBlock from '../components/bankBlock.vue'
import countUp from '../components/countUp.vue';
    import Cookies from 'js-cookie';
    import util from '@/libs/util.js';
    import {getMenu,getTotalData,getAreaData,getBankCustomer} from '@/libs/get.js'
    export default {
        components: {
            smenu,
            breadcrumbNav,
            bankBlock,
            countUp
        },
        data () {
            return {
                user_type:'',
                colNum:5,
                openedSubmenuArr:this.$store.state.app.openedSubmenuArr,
                shrink:false,
                menuTheme:"light",
                totalStateArr:[],
                bankName:'',
                bankImg:''
            }
        },
        computed: {
            menuList () {
                return this.$store.state.app.menuList;
            },
            currentPath () {
                return this.$store.state.app.currentPath; // 当前面包屑数组
            }
        },
        methods: {
            async init () {
                if (!!this.$store.state.user.info.user_type) {
                    this.user_type = this.$store.state.user.info.user_type;
                    this.userUuid = this.$store.state.user.info.inst_uuid;
                } else {
                    this.user_type = JSON.parse(localStorage.userInfo).user_type;
                    this.userUuid = JSON.parse(localStorage.userInfo).inst_uuid;
                }
                 //this.getArea();
                 if(this.user_type!='01' ){
                     this.getCustomer();
                 }
                await this.getMenuList();
                let pathArr = util.setCurrentPath(this, this.$route.name);
                this.$store.commit('updateMenulist');
                if (pathArr.length >= 2) {
                    this.$store.commit("addOpenSubmenu", pathArr[0].name);
                    this.openedSubmenuArr=this.$store.state.app.openedSubmenuArr;
                }
                
            },
            handleCLickLogOut(){
                this.$store.commit("logout", this);
                this.$router.push({
                    name: "login"
                });
            },
            beforePush(){
                return true
            },
            handleSubmenuChange(val){
                // console.log(val)
            },
            handleClickShrink(){
                this.shrink=!this.shrink;
            },
            /**
             * 获取左侧导航
             */
            async getMenuList(){
                let res=await getMenu();
                if(res.status===200){
                    let response=res.data;
                    if(response.code===200){
                        let reMenu=JSON.parse(JSON.stringify(this.$store.state.app.menuRouter));
                        let poArr=response.data;
                        let menuList=util.arrcheck(reMenu,poArr);
                        this.$store.commit("setNewMenuRouter", menuList);
                        this.$store.commit('updateMenulist');
                    }else{
                        this.$Notice.error({
                            title: '权限菜单请求出错',
                            desc:response.msg
                        });
                    }
                }else{
                    this.$Notice.error({
                        title: '请求出错'
                    });
                }  
            },
            async getTotal(){
                let res=await getTotalData();
                if(res.status===200){
                    let response=res.data;
                    if(response.code===200){
                        let data=response.data;
                        this.totalStateArr=data.data;   
                        this.bankName=data.logo.name;
                        this.bankImg=data.logo.image_url;
                }
                }else{
                    this.$Notice.error({
                        title: '请求出错'
                    });
                }
            },
            async getArea(){
                let res=await getAreaData();
                if(res.status===200){
                    let response=res.data;
                    if(response.code===200){
                        let area=util.changeAreaKey(response.data);
                         this.$store.commit("setAreaData",area);
                    }else{
                        this.$Notice.error({
                        title: response.msg
                    });
                    }
                }else{
                    this.$Notice.error({
                        title: '请求失败'
                    });
                }
            }  ,
            async getCustomer(){
                let res=await getBankCustomer();
                if(res.status===200){
                    let response=res.data;
                    if(response.code===200){
                         this.$store.commit("setCustomer",response.data);
                    }else{
                        this.$Notice.error({
                        title: response.msg
                    });
                    }
                }else{
                    this.$Notice.error({
                        title: '请求失败'
                    });
                }
            }   
        },
        watch: {
            '$route' (to) {
                this.$store.commit('setCurrentPageName', to.name);
                let pathArr = util.setCurrentPath(this, to.name);
                if (pathArr.length >= 2) {
                    this.$store.commit("addOpenSubmenu", pathArr[0].name);
                    this.openedSubmenuArr=this.$store.state.app.openedSubmenuArr;     
                }
            },
            'shrink':function(){
                this.colNum=this.shrink?2:5;
            }
        },
        mounted () {
            this.init();
        },
        created () { 
            //this.init();
            this.getTotal()
        }
    };
</script>


<style lang='scss' >
@import './main.scss';
.animationtranslate{
    transition:all 0.4s ease;
}
</style>